<template>
	<view class="page">
		<view class="p-pker align-center">
			<view class="k">扣款类型</view>
			<picker class="v2" @change="bindPickerChange" :value="index" :range="infoList" range-key="name">
				{{infoList[index].name}}
			</picker>
			<!-- <input class="v" v-model="deduction_price" placeholder="请填写你的扣款金额~" /> -->
		</view>
		<view class="p-bom align-center">
			<view class="k">扣款金额</view>
			<input class="v" v-model="deduction_price" placeholder="请填写你的扣款金额~" />
		</view>
		<view class="p-top">
			<view class="k">扣款原因</view>
			<textarea maxlength="400" class="area" placeholder="请填写你的扣款原因~" v-model="deduction_content"></textarea>
		</view>
		<view class="p-cont">
			<view class="k">扣款凭证</view>
			<uploadImages :count="6" :length="6" ref="uploadRef" />
		</view>
		<submit-btn @submit="submit" ref="submitRef">
			<template v-slot:btns="{isSubmitted}">
				<view class="p-btn" :class="{'disabled':isSubmitted}">
					提交
				</view>
			</template>
		</submit-btn>
	</view>
</template>
<script lang="ts">
	import {
		reactive,
		toRefs,
		defineComponent,
		ref,
	} from 'vue';
	import uploadImages from '@/components/upload-images.vue'
	import { onLoad } from "@dcloudio/uni-app";
	const freezemer = defineComponent({
		components: {
			uploadImages,
		},
		props: {
		},
		setup(props : any, ctx : any) {
			const data = reactive({
				deduction_price: '',
				deduction_content: '',
				infoList: [{
					id: 1,
					name: '车损扣款',
				},
				{
					id: 2,
					name: '违章扣款',
				},
				{
					id: 3,
					name: '油费（含服务费扣款）',
				},
				{
					id: 4,
					name: '其他扣款',
				}],
				index: 0,
				info: 1,
				merchant_order_id: '',
			})
			onLoad((e) => {
				data.merchant_order_id = e.id
			})
			const uploadRef = ref();
			const submitRef = ref();
			const bindPickerChange = (e) => {
				data.index = e.detail.value;
				data.info = data.infoList[e.detail.value].id;
			}
			const submit = async () => {
				if (!data.deduction_price) {
					uni.$tools.msg('请填写扣款金额');
					return;
				} if (!data.deduction_content) {
					uni.$tools.msg('请填写扣款原因');
					return;
				}
				let imgArr = uploadRef.value.getImgs();
				let deduction_images = imgArr.join(',');
				console.log('imgArr', imgArr)
				const sendData = {
					merchant_order_id: data.merchant_order_id,
					info: data.info,
					deduction_price: data.deduction_price,
					deduction_content: data.deduction_content,
					deduction_images: imgArr,
				}
				let res = await uni.$request('basedata.addDeduction', sendData)
				console.log('res', res)
				// submitRef.value.chgeStatus();
				// uni.$tools.msg();
				// setTimeout(() => {
				// 	uni.$this.goBack();
				// }, 800)
				uni.showModal({
					title: '提示',
					content: res.msg,
					showCancel: false,
				})
			}
			return {
				...toRefs(data),
				bindPickerChange,
				uploadRef,
				submit
			};
		}
	})
	export default freezemer;
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.page {
		padding: 24rpx 20rpx 0;
	}

	.p-pker {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0px 1rpx 0px 0px rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		margin: 20rpx 0;
		padding: 25rpx;
		overflow: hidden;

		.k {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 10rpx 0 10rpx;

		}

		.v2 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 10rpx 0 10rpx 60rpx;
		}

		.v {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}

		.pkbox {
			width: 400rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 10rpx 0 20rpx;
			float: right;
			text-align: right;
		}
	}

	.p-cont {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0px 1rpx 0px 0px rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		margin: 20rpx 0;
		padding: 25rpx;

		.k {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 10rpx 0 20rpx;

		}

	}

	.p-top {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0px 1rpx 0px 0px rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		margin: 20rpx 0;

		.k {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-right: 56rpx;
			padding: 25rpx;
		}

		.area {
			padding: 20rpx;
			width: 100%;
			height: 200rpx;
			color: #333;
			font-size: 28rpx;
			line-height: 34rpx;
		}
	}

	.p-bom {
		margin-top: 10rpx;
		width: 710rpx;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 25rpx;

		.k {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-right: 56rpx;
		}

		.v {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}

	.p-btn {
		width: 690rpx;
		height: 85rpx;
		background: #3E6FEF;
		border-radius: 43rpx;
		text-align: center;
		line-height: 85rpx;

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;

		&.disabled {
			background-color: #eee;
		}
	}
</style>